<template>
  <view class="cate">
    <scroll-view scroll-x="true" class="wrap">
      <view class="nav">
        <view
          v-for="(item, index) in navList"
          :key="item.id"
          @click="change(item.id)"
          :class="{ active: item.id == currentId }"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>

    <view class="con-wrap">
      <view v-for="item in conList" class="" @click="gotodetail(item.id)">
        <image :src="item.primary_pic_url" mode="widthFix"></image>
        <text>{{ item.name }}</text>
        <text>{{ item.retail_price }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCate, getCateList } from "../../request/api.js";
export default {
  data() {
    return {
      navList: [],
      currentId: 1005000,
      conList: [],
    };
  },
  onLoad() {
    getCate().then((res) => {
      console.log(res);
      this.navList = res.navData;
    });
  },
  methods: {
    change(id) {
      this.currentId = id;
      getCateList({ categoryId: this.currentId }).then((res) => {
        console.log(res);
        this.conList = res.data;
      });
    },
    gotodetail(id) {
      uni.navigateTo({
        url: "/pages-home/detail/detail?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cate {
  .nav {
    display: flex;
    view {
      width: 160rpx;
      height: 80rpx;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      background: #fff;
    }
    .active {
      color: #ff5a5f;
    }
  }
  .con-wrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    view {
      width: 48%;
      image {
        width: 100%;
      }
    }
  }
}
</style>
